import React, { useState, useEffect } from 'react';
import { is_obj_eq, PanelFind, IkYm, obj_str, IkSelect, Dlg, IkInput, useForm, IkFind, IkFindDate, IkDate, obj_empty, is_empty, Btn } from '../../nui';
import { loc } from '../../local';

/* lst: [
 *     {sn: "xx", name: "xx", ctl: "xxx"}
 * ]
*/
const FindBarBase = ({ left, right, hcmd, data, cur, hclear, hfilter }) => {
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState();
    const form = useForm(setValue);

    useEffect(() => {
        if (is_obj_eq(cur, value)) {
            return;
        }

        setValue(cur);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [cur]);

    if (obj_empty(data)) {
        return null;
    }

    const getView = () => {
        const para = data["para"];
        if (is_empty(para)) {
            return null;
        }

        const set = new Set();

        const ctl = data["ctl"];
        if (!is_empty(ctl)) {
            ctl.forEach(d => set.add(d.sn));
        }

        const ret = [];
        para.forEach(d => {
            if (set.has(d.id)) {
                return;
            }

            ret.push(<IkInput className="ml-4" key={d.id} name={d.id} label={d.des} form={form} value={value}/>);
        });

        return (
            <div className="flex flex-col">
                <div className="flex flex-row flex-wrap">{ret}</div>
            </div>
        )
    };

    const findBtn = () => {
        const ctl = data["ctl"];
        if (is_empty(ctl)) {
            return null;
        }

        return <Btn className="mt-2 mr-4" hcmd={hfind} color="green">{loc("ss")}</Btn>;
    };

    const getCtl = () => {
        const ctl = data["ctl"];
        if (is_empty(ctl)) {
            return null;
        }

        return ctl.map(d => {
            if (d.ctl === "IkFind") {
                let w = obj_str(d, "w");
                if (!w) {
                    w = "w-64";
                }

                return <IkFind key={d.sn} className="mr-4" name={d.sn} label={d.name} form={form} value={value} mg="dense" lst={d.lst} width={w}/>;
            }
            else if (d.ctl === "IkDate") {
                let format = "yyyy-MM-dd";
                if (d.format) {
                    format = d.format;
                }

                return <IkDate key={d.sn} className="mr-4" name={d.sn} label={d.name} form={form} value={value} format={format} mg="dense"/>
            }
            else if (d.ctl === "IkYm") {
                let format = "yyyy-MM";
                if (d.format) {
                    format = d.format;
                }

                return <IkYm key={d.sn} className="mr-4" name={d.sn} label={d.name} form={form} value={value} format={format} mg="dense"/>
            }
            else if (d.ctl === "IkFindDate") {
                let type = "datetime";
                if (d.type) {
                    type = d.type;
                }

                return <IkFindDate key={d.sn} className="mr-4" name={d.sn} name_s={d.start} name_e={d.end} label={d.name} form={form}
                    value={value} type={type} mg="dense"/>
            }
            else if (d.ctl === "IkSelect") {
                return <IkSelect key={d.sn} className="mr-4 mt-2" name={d.sn} label={d.name} form={form} value={value} mg="dense" lst={d.lst}/>;
            }

            return <IkInput key={d.sn} label={d.name} name={d.sn} form={form} value={value} className="mr-4" mg="dense"/>;
        });
    };

    const getMore = () => {
        const para_lst = data["para"];
        if (is_empty(para_lst)) {
            return null;
        }

        return <Btn className="mt-2 mr-4" name="hfind" hcmd={() => setOpen(true)}>{loc("mg_296")}</Btn>;
    };

    const hfind = () => {
        if (hfilter) {
            hfilter("");
        }

        hcmd(value);
    };

    const getClear = () => {
        if (hclear) {
            return <Btn className="mt-2 mr-4" hcmd={hclear}>{loc("mg_295")}</Btn>;
        }

        return null;
    };

    return (
        <PanelFind left={left} right={right} hcmd={hfilter}>
            <div className="ml-4">
                <div className="flex flex-row flex-wrap items-center mb-1">
                    {findBtn()}
                    {getCtl()}
                    {getMore()}
                    {getClear()}
                </div>
                <Dlg open={open} hcmd={() => setOpen(false)} title={loc("mg_296")} width="lg">
                    {getView()}
                </Dlg>
            </div>
        </PanelFind>
    );
};

const filter_row = (row, col, filter) => {
    if (is_empty(row)) {
        return null;
    }

    if (!filter || is_empty(col)) {
        return row;
    }

    let ret = row.filter(d => {
        for (let i = 0; i < col.length; i++) {
            const c = col[i];
            if (c === "index" || c === "e_opt") {
                continue;
            }

            let tmp = "" + d[c];
            if (!tmp) {
                continue;
            }

            const find = filter.toLowerCase();
            tmp = tmp.toLowerCase();

            if (tmp.indexOf(find) >= 0) {
                return true;
            }
        }

        return false;
    });

    return ret;
};

export {filter_row, FindBarBase};
